<style>
    #VIEW-reg {
        height: 100%;
        background: #252834;
        padding-top: 1px;
        margin-top: -1px;
    }

    #VIEW-reg .layui-logo {
        user-select: none;
        overflow: hidden;
        position: static;
        font-size: 30px;
        color: #d6e0f6;
        width: 100%;
        padding: 0;
        line-height: 120px;
        height: 120px;
        color: #3491ff;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        transition: height .8s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    #VIEW-reg .layui-logo span {
        font-weight: normal;
        color: #fff;
        border-bottom: 1px solid #3491ff;
    }

    #VIEW-reg .layui-logo span b {
        color: #3491ff;
    }


    #VIEW-reg .reg-wrap {
        position: relative;
        top: 50%;
        margin-top: -290px;
        height: 540px;
    }

    #VIEW-reg .layui-form {
        overflow: hidden;
        background: #fff;
        padding: 40px;
        padding-bottom: 20px;
        border-radius: 0px;
        box-shadow: 0 0 30px #000;
        position: relative;
    }

    #VIEW-reg .layui-form-item {
        position: relative;
    }

    #VIEW-reg .verify-block {
        display: none;
    }

    #VIEW-reg .codeimg {
        margin-left: 10px;
        cursor: pointer;
    }

    #VIEW-reg .sendsms {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 100px;
        border: none;
    }

    #VIEW-reg .sendsms.layui-btn-disabled {
        background: #f4f4f4;
        color: #bbb;
    }

    #VIEW-reg .houseimg {
        text-align: center;
    }

    #VIEW-reg .houseimg img {
        display: inline-block;
        margin-top: 5%;
    }


</style>

<div class="layui-fluid" id="VIEW-reg" lay-title="用户注册">
    <div class="reg-wrap">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 nepadmin-tc">
                    <div class="layui-logo"><span>Ne<b>pA</b>dmin</span></div>
                </div>
                <div class="layui-col-xs12 layui-col-lg8 layui-col-lg-offset2">

                    <form class="layui-form" action="" lay-filter="form-group">
                        <div class="layui-form-item">
                            <label class="layui-form-label">*用户名</label>
                            <div class="layui-input-block" style="width:120px">
                                <input type="text" name="username" lay-verify="required|username"
                                    autocomplete="off" placeholder="请输入用户名" maxlength="10" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">*密码</label>
                            <div class="layui-input-block" style="width:168px">
                                <input type="password" name="pass" lay-verify="required|password"
                                    autocomplete="off" placeholder="请输入密码" maxlength="20" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">*确认密码</label>
                            <div class="layui-input-block" style="width:168px">
                                <input type="password" id="pass_re" lay-verify="required"
                                        autocomplete="off" placeholder="请再次输入密码" maxlength="20" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">*姓名</label>
                                <div class="layui-input-block">
                                    <div class="layui-inline">
                                        <input type="text" id="f_name" name="name" lay-verify="required"
                                            autocomplete="off" placeholder="请输入姓名" maxlength="15" class="layui-input">
                                    </div>
                                    <div class="layui-inline">
                                        <input type="radio" id="f_sex_m" name="sex" value="男" title="男">
                                        <input type="radio" id="f_sex_w" name="sex" value="女" title="女">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">*电子邮箱</label>
                            <div class="layui-input-block" style="width:168px">
                                <input type="text" name="email" lay-verify="required|email"
                                        autocomplete="off" placeholder="请输入电子邮箱" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">*学院专业</label>
                            <div class="layui-input-block">
                                <div class="layui-inline">
                                    <select name="institute" id="f_institute" lay-verify="required"
                                        lay-filter="form-group-institute">
                                        <option value="">请选择学院</option>
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <select name="speciality" id="f_speciality" lay-verify="required">
                                        <option value="">请选择专业</option>
                                    </select>
                                </div>
                                <div class="layui-inline" id="f_class" style="width:60px">
                                    <input type="text" name="class" lay-verify="class" autocomplete="off"
                                        placeholder="班级" maxlength="4" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">MAC地址</label>
                            <div class="layui-input-block">
                                <div class="layui-inline">
                                    <i class="layui-icon">&#xe7d8;</i>
                                </div>
                                <div class="layui-inline" style="width:132px">
                                    <input type="text" name="phone_mac" lay-verify="mac" autocomplete="off"
                                        placeholder="手机MAC地址" maxlength="17" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-input-block">
                                <div class="layui-inline">
                                    <i class="layui-icon">&#xe898;</i>
                                </div>
                                <div class="layui-inline" style="width:132px">
                                    <input type="text" name="pc_mac" lay-verify="mac" autocomplete="off"
                                        placeholder="电脑MAC地址" maxlength="17" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即注册</button>
                                &nbsp;&nbsp;
                                <a lay-href="/user/login">返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'laydate'], function () {
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form;

        var specialities_list = [];

        admin.get({
            api: 'specialities',
            success: function (res) {
                specialities_list = res.data;
                $("#f_institute").find("option").remove();
                $('#f_institute').append("<option value=''>请选择学院</option>");
                layui.each(res.data, function (index, item) {
                    $('#f_institute').append('<option value=' + item.institute + '>' + item.institute + '</option>');
                });

                form.render('select');
            },
            complete: function () {
                //loading.hide();
            }
        });


        form.render(null, 'form-group');

        laydate.render({
            elem: '#form-group-date'
        });

        /* 自定义验证规则 */
        form.verify({
            username: function (value) {
                if ( (! /^\d+\d+\d$/.test(value)) || value.length < 5) {
                    return '请输入正确的学号或者教职工号';
                }
            },
            password: function (value){
                var pass_re = $('#pass_re').val();
                if(value != pass_re ){
                    return '两次输入的密码不一致';
                }
            },
            class: function (value) {
                if(value.length != 0 ){
                    if (! /^\d+\d+\d$/.test(value) || value.length != 4) {
                        return '请输入正确的班级号，如：1501';
                    }
                }
            },
            mac: function (value){
                if(value.length != 0 ){
                    if(! /^[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}:[A-Fa-f\d]{2}$/.test(value)){
                        return '请输入正确的MAC地址，如：00:00:00:00:00:00';
                    }
                }
            },
        });

        /* 监听学院选择 */
        form.on('select(form-group-institute)', function (data) {
            console.log(data);
            $("#f_speciality").find("option").remove();
            $('#f_speciality').append("<option value=''>请选择专业</option>");
            layui.each(specialities_list, function (index, item) {
                if (data.value == item.institute) {
                    layui.each(item.specialities, function (index, item) {
                        $('#f_speciality').append('<option value=' + item + '>' + item + '</option>');
                    });
                    return true;
                }
            });
            form.render('select');
        });

        /* 监听提交 */
        form.on('submit(form-group-submit)', function (data) {
            var post_data = data.field;

            admin.post({
                api: 'register',
                data: post_data,
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg('注册成功');
                    } else {
                        layer.msg(res.msg);
                    }
                },
            });

            return false;
        });


    });
</script>